Day #23 CSS3 Accordion

Sandbox This is where you play

Instructions: Create an information accordion with only CSS3!

CSS3 Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui, optio id eaque laudantium reprehenderit aliquam vel cum necessitatibus ut doloremque ullam natus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui, optio id eaque laudantium reprehenderit aliquam vel cum necessitatibus ut doloremque ullam natus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui, optio id eaque laudantium reprehenderit aliquam vel cum necessitatibus ut doloremque ullam natus.

Final Result Use this for reference!

CSS3 Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui, optio id eaque laudantium reprehenderit aliquam vel cum necessitatibus ut doloremque ullam natus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui, optio id eaque laudantium reprehenderit aliquam vel cum necessitatibus ut doloremque ullam natus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui, optio id eaque laudantium reprehenderit aliquam vel cum necessitatibus ut doloremque ullam natus.

Information About this lesson

What are we making?

Fun & fancy ways to create an intuitive information accordion with CSS3!

Where can I use it?

In your websites, client projects and applications as a way to organize information in an intuitive manner!

How compatible are these styles with major browsers?

Check the CSS3 styles from your stylesheet on this website. It allows you to see the compatibility of every CSS style with major browser.